import {ref} from "vue";
import dayjs from 'dayjs'
import {JCrudColumnProps} from "../components/crud/crud";

enum STATUS {
    OFF = '0',
    RUNNING = '1',
    ONLINE = '2',
    ERROR = '3',
}

const columns = ref<JCrudColumnProps[]>([
    {
        title: "#",
        dataIndex: "id",
    },
    {
        title: "自动完成",
        dataIndex: "auto-complete",
        type: "auto-complete",
        props: {
            options: [
                {
                    label: '选中',
                    value: 1,
                },
                {
                    label: '未选中',
                    value: 0,
                },
            ],
        },
    },{
        title: "级联选择",
        dataIndex: "cascader",
        type: "cascader",
        props: {
            options: [
                {
                    label: '选中',
                    value: 1,
                },
                {
                    label: '未选中',
                    value: 0,
                },
            ],
        },
    },{
        title: "多选框",
        dataIndex: "checkbox-group",
        type: "checkbox-group",
        props: {
            options: [
                {
                    label: '选中',
                    value: 1,
                },
                {
                    label: '未选中',
                    value: 0,
                },
            ],
        },
    },
    {
        title: "选择器",
        dataIndex: "select",
        type: "select",
        props: {
            options: [
                {
                    label: '选中',
                    value: 1,
                },
                {
                    label: '未选中',
                    value: 0,
                },
            ],
        },
    },
    {
        title: "用户名",
        dataIndex: "username",
        type: "input",
    },
    {
        title: "姓名",
        dataIndex: "name",
        type: "input",
    },
    {
        title: "邮箱",
        dataIndex: "email",
        type: "input",
    },
    {
        title: "手机",
        dataIndex: "mobile",
        type: "input",
    },
    {
        title: "职位",
        dataIndex: "position",
        type: "input",
    },
    {
        title: "更新时间",
        dataIndex: "updatedAt",
        type: "date",
        props: {
            valueFormat: 'YYYY-MM-DD HH:mm:ss'
        },
        width: 200,
    },
    {
        title: "操作",
        dataIndex: "action",
        width: 200,
    },
]);

const datasource = [
    {
        id: 1,
        name: '第一个任务',
        callNo: 2000,
        desc: '一生那么短，遗忘又那么漫长',
        status: STATUS.ONLINE,
        updatedAt: dayjs().format('YYYY-MM-DD HH:mm'),
    },
    {
        id: 2,
        name: 'Ant Design Vue',
        callNo: 200,
        desc: '有时，你必须进入别人的世界去发现自己的世界缺少什么',
        status: STATUS.OFF,
        updatedAt: dayjs().format('YYYY-MM-DD HH:mm'),
    },
    {
        id: 3,
        name: 'Vue',
        callNo: 2010,
        desc: '一生那么短，遗忘又那么漫长',
        status: STATUS.ERROR,
        updatedAt: dayjs().format('YYYY-MM-DD HH:mm'),
    },
    {
        id: 4,
        name: 'Vite',
        callNo: 20300,
        desc: '希望是件美丽的东西，也许是最好的东西',
        status: STATUS.ERROR,
        updatedAt: dayjs().format('YYYY-MM-DD HH:mm'),
    },
    {
        id: 5,
        name: 'React',
        callNo: 2000,
        desc: '人并非生来就伟大，而是越活越伟大',
        status: STATUS.ONLINE,
        updatedAt: dayjs().format('YYYY-MM-DD HH:mm'),
    },
    {
        id: 6,
        name: 'Antdv Pro',
        callNo: 2000,
        desc: '不管何时何地，做你想做的事永远都不嫌晚',
        status: STATUS.OFF,
        updatedAt: dayjs().format('YYYY-MM-DD HH:mm'),
    },
    {
        id: 7,
        name: 'Webpack',
        callNo: 2000,
        desc: '你要一直不停地往前走，不然你不会知道生活还会给你什么',
        status: STATUS.ONLINE,
        updatedAt: dayjs().format('YYYY-MM-DD HH:mm'),
    },
]
export default {columns, datasource}